<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <style>
    p {
      color: red;
    }
  </style> -->
</head>

<body>
  <button id="btn1">添加</button>
  <button id="btn2">删除</button>
  <button id="btn3">替换</button>
  <button id="btn4">任意加1</button>
  <button id="btn5">任意加2</button>
  <button id="btn6">变红</button>
  <ul>
    <li>1111</li>
  </ul>
  <p>
    谭承秦弟已是可劫他起着将老魂之日郭帝守，仍方磊何降低感房中之落和不，变沉感夹感老了京投派同第之知单同位汪活，梵才王人叩国有己洪认谢因，皇不陀你策日评哉国娘夹，谷游吞了绝判的本者，两感同是而责的内能为后量者司啊，位的一才未人说高血的骂二越人笔疾得护，骨而到。
  </p>
  <script>
    var oBtn1 = document.getElementById("btn1");
    var oBtn2 = document.getElementById("btn2");
    var oBtn3 = document.getElementById("btn3");
    var oBtn4 = document.getElementById("btn4");
    var oBtn5 = document.getElementById("btn5");
    var oBtn6 = document.getElementById("btn6");
    //直接拿对象
    var oUl = document.querySelector('ul')
    var oP = document.querySelector('p');
    oBtn1.onclick = function () {
      //创建元素
      var oLi = document.createElement('li');
      oLi.innerText = Math.random();
      //直接打印文字
      //oLi.innerText = '<span>222</span>'
      //转化成html再打印文字
      //oLi.innerHTML = '<span>222</span>'
      //console.log(oLi);
      //console.log(111);
      oUl.appendChild(oLi);
    }
    //console.log(222);

    oBtn2.onclick = function () {
      oUl.removeChild(oUl.lastElementChild);
    }

    oBtn3.onclick = function () {
      var oLi = document.createElement('li');
      oLi.innerText = 888;
      oUl.replaceChild(oLi, oUl.lastElementChild)
    }

    oBtn4.onclick = function () {
      var oLi = document.createElement('li');
      oLi.innerText = Math.random();
      oUl.insertBefore(oLi, oUl.lastElementChild);
    }
    oBtn5.onclick = function () {
      oUl.insertAdjacentHTML('afterbegin', '<li>123456789</li>')
    }

    oBtn6.onclick = function () {
      oP.style = 'color:red;';
    }


  </script>
</body>

</html>